<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">绑定手机</span>
      </template>
    </van-nav-bar>
    <!-- 修改 -->
    <div style="padding-top: 50px">
      <!-- 手机号验证 -->
      <div v-show="!isChecked">
        <div style="color: #FF8800; text-align: left;padding: 20px 30px">需要验证您的手机号</div>
        <!-- 原手机号 -->
        <van-field
          class="input"
          v-model="oldPhone"
          label="原手机号"
          readonly
          disabled
        />
        <!-- 验证码 -->
        <van-field
          type="digit"
          class="input"
          v-model="smsCode"
          center
          clearable
          label="验证码"
          maxlength="4"
        >
          <template #button>
            <van-button size="small" :disabled="time>0" color="#FF8800" round @click="onGetSMSCode(oldPhone)">
              <div v-if="time===0">发送</div>
              <van-count-down style="color: white" v-if="time > 0" :time="time" format="ss" @finish="onTimeOver"/>
            </van-button>
          </template>
        </van-field>
        <!-- 验证 -->
        <div style="padding: 50px 30px">
          <van-button round block color="#FF8800" @click="onCheck">下一步</van-button>
        </div>
      </div>
      <!-- 手机号修改 -->
      <div v-show="isChecked">
        <!-- 新手机号 -->
        <van-field
          v-model="newPhone"
          class="input"
          label="新手机号"
          placeholder="请输入新手机号"
        >
          <van-icon name="cross" slot="right-icon" @click="onClearPhone"></van-icon>
        </van-field>
        <!-- 新验证码 -->
        <van-field
          type="digit"
          class="input"
          v-model="newSmsCode"
          center
          clearable
          label="验证码"
          maxlength="4"
        >
          <template #button>
            <van-button size="small" :disabled="timeNew>0" color="#FF8800" round @click="onGetSMSCode(newPhone)">
              <div v-if="timeNew===0">发送</div>
              <van-count-down style="color: white" v-if="timeNew > 0" :time="timeNew" format="ss" @finish="onTimeOverNew()"/>
            </van-button>
          </template>
        </van-field>
        <!-- 确定 -->
        <div style="padding: 50px 30px">
          <van-button round block color="#FF8800" @click="onSave">确认修改</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditPhone',
  data () {
    return {
      isChecked: false,
      time: 60,
      timeNew: 60,
      smsCode: '',
      newSmsCode: '',
      newPhone: '',
      isShowPassword: false
    }
  },
  methods: {
    // 返回
    onBack () {
      this.$router.back()
    },
    // 验证
    onCheck () {
      if (!this.smsCode) {
        this.$toast('请输入验证码')
        return
      }
      this.$api.checkSmsCodeReq({ smsCode: this.smsCode }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.time = 0
            this.isChecked = true
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 保存
    onSave () {
      if (!this.newPhone) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.newSmsCode) {
        this.$toast('请输入验证码')
        return
      }
      // 提交服务器
      this.$api.changePhoneReq({ oldPhoneSmsCode: this.smsCode, newPhoneNum: this.newPhone, newSmsCode: this.newSmsCode }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.$toast('修改成功')
            this.$store.commit('SetUserPhone', this.newPhone)
            setTimeout(() => {
              this.$toast.clear()
              this.$router.back()
            }, 1500)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 显示密码
    onShowPassword () {
      this.isShowPassword = !this.isShowPassword
    },
    // 清除手机号
    onClearPhone () {
      this.newPhone = ''
    },
    // 获取短信验证码
    onGetSMSCode (phoneNum) {
      if (!phoneNum.length) {
        this.$toast('手机号错误')
        return
      }
      this.$api.getSmsCodeReq({
        type: 0,
        countryCode: '+86',
        phoneNum: phoneNum
      }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.time = 60 * 1000
            this.smsCode = '8888'
            this.newSmsCode = '8888'
            this.$toast('发送成功')
          }
        }
      )
    },
    // 短信倒计时结束
    onTimeOver () {
      this.time = 0
    },
    // 短信倒计时结束
    onTimeOverNew () {
      this.timeNew = 0
    }
  },
  computed: {
    oldPhone: function () {
      return this.$store.state.user.phoneNum
    }
  }
}
</script>

<style scoped>

</style>
